<template>
	<view style="width: 100%;">
		<u-navbar title="加入VIP会员"></u-navbar>
		<view class="content dis_f_co">
			<view class="dis_f_co_c_c">
				<image class="join" src="../../../static/icon/fxjoin-T.png" mode=""></image>
				<view class="title">低投入/高利润/可持续收益</view>
				<view class="comcon" style="margin-bottom: 90rpx;">
					<view class="combg">VIP会员介绍</view>
					<view class="comp">vip会员</view>
				</view>
				<view class="comcon" style="margin-bottom: 20rpx;">
					<view class="combg">VIP会员介绍</view>
					<view class="inputs dis_f_sb_c" @click="show = true">
						<view>{{form.address}}</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="tips">VIP初始城市一经选择，不可再更改，请谨慎选择</view>
					<view class="inputs dis_f_sb_c" @click="shows = true">
						<view>{{form.level}}</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view class="tips" style="margin-bottom: 40rpx;">VIP等级不同对应的收益也不相同</view>
					<view style="font-size: 32rpx;color: #60360b;font-weight: bold;margin-bottom: 20rpx;">账号信息</view>
					<view class="dis_f_co basicCon">
						<view class="part dis_f_sb_c">
							<view class="left">用户名</view>
							<view class="right">811505719</view>
						</view>
						<view class="part dis_f_sb_c">
							<view class="left">昵称</view>
								<view class="right">811505719</view>
						</view>
						<view class="part dis_f_sb_c" style="border-bottom: none;">
							<view class="left">真实姓名</view>
							<view class="right">811505719</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom_btn dis_f_sb_c">
 			<view class="price">￥0.00</view>
			<view class="join_btn dis_f_c_c">立即加入</view>
		</view>
		<u-picker v-model="show" mode="region" :params="params" @confirm="confirm"></u-picker>
		<u-select v-model="shows" :list="list" @confirm="confirms"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					address: '选择分站',
					level: '选择VIP等级'
				},
				show: false,
				shows: false,
				params: {
					province: true,
					city: false,
					area: false
				},
				list: [{
						value: '1',
						label: 'VIP1'
					},
					{
						value: '2',
						label: 'VIP2'
					}
				],
			};
		},
		methods: {
			confirm(e) {

				this.form.address = e.province.label
			},
			confirms(e){
				console.log(e)
				this.form.level = e[0].label
			}
		}
	}
</script>

<style lang="scss">
	
	.bottom_btn{
		position: fixed;
		width: 100%;
		height: 120rpx;
		background-color: #fff;
		bottom: 0;
		.price{
			font-size: 40rpx;
			padding-left: 40rpx;
		}
		.join_btn{
			height: 100%;
			width: 40%;
			background: linear-gradient(-45deg, #FFBE7E 0%, #FFD8B4 100%);
			color: #795638;
			
		}
	}
	.content {
		background-image: url(../../../static/index/fxjoin-bg.png);
		background-size: 100% 100%;
		padding: 140rpx 40rpx 20rpx 40rpx;
		margin-bottom: 120rpx;
		.basicCon{
			background-color: #fff;
			border: 1px solid #E0ccba;
			border-radius: 10rpx;
			.part{
				padding: 26rpx 20rpx 27rpx 22rpx;
				border-bottom: 1rpx solid #e0ccba;
				.left{
					font-size: 28rpx;
					color: #60360b;
				}
				.right{
					color: #999;
				}
			}
		}
		.tips {
			font-size: 22rpx;
			color: #C5B4A4;
			padding: 24rpx 0;
		}

		.inputs {
			background-color: #fff;
			border: 1rpx solid #E0CCba;
			border-radius: 10rpx;
			padding-left: 22rpx;
			font-size: 28rpx;
			font-weight: bold;
			padding: 28rpx 22rpx;

		}

		.join {
			width: 650rpx;
			height: 123rpx;
			margin-bottom: 20rpx;
		}

		.title {
			font-size: 34rpx;
			color: #fff;
			margin-bottom: 130rpx;
		}

		.comcon {
			background: linear-gradient(-45deg, #FFDCBC 0%, #FFEFE0 100%);
			box-shadow: 1px 7px 13px 0px rgba(211, 20, 57, .46);
			border-radius: 20rpx;
			position: relative;
			padding: 88rpx 36rpx 40rpx;
			width: 100%;

			.combg {
				font-size: 40rpx;
				color: #b04D16;
				font-weight: bold;
				padding: 20rpx 44rpx 38rpx 70rpx;
				background-image: url(../../../static/icon/fxjoin-C.png);
				background-size: contain;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: -40rpx;
				white-space: nowrap;
			}

			.comp {
				font-size: 26rpx;
				color: #A5603C;
				text-indent: 5rpx;
				line-height: 42rpx;
			}
		}
	}
</style>
